import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select } from 'antd'


const FormItem = Form.Item
const Option = Select.Option

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optiondata,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        ID: item.ID,
      }
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }
  const handleChange = (value) => {
    console.log(`selected ${value}`)
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const roleData = optiondata.roleData.map(d => <Option key={d.ID}>{d.ROLE_NAME}</Option>)
  const departmentData = optiondata.departmentData.map(d => <Option key={d.NAME}>{d.NAME}</Option>)
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="名字" hasFeedback {...formItemLayout}>
          {getFieldDecorator('NAME', {
            initialValue: item.NAME,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="用户名" hasFeedback {...formItemLayout}>
          {getFieldDecorator('USERNAME', {
            initialValue: item.USERNAME,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="身份证号码" hasFeedback {...formItemLayout}>
          {getFieldDecorator('NUMBER', {
            initialValue: item.NUMBER,
            rules: [
              {
                required: true,
                pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                message: '请输入正确的身份证号码!',
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="角色" hasFeedback {...formItemLayout}>
          {getFieldDecorator('ROLE_ID', {
            initialValue: item.ROLE_ID,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select
            onChange={handleChange}
          >
            {roleData}
          </Select>)}
        </FormItem>
        <FormItem label="手机号码" hasFeedback {...formItemLayout}>
          {getFieldDecorator('PHONE', {
            initialValue: item.PHONE,
            rules: [
              {
                required: true,
                pattern: /^1[34578]\d{9}$/,
                message: '请输入正确的手机号码!',
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="E-mail" hasFeedback {...formItemLayout}>
          {getFieldDecorator('EMAIL', {
            initialValue: item.EMAIL,
            rules: [
              {
                pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
                message: '请输入正确的E-mail!',
              },
            ],
          })(<Input placeholder="邮件地址" />)}
        </FormItem>
        <FormItem label="部门" hasFeedback {...formItemLayout}>
          {getFieldDecorator('DEPARTMENT', {
            initialValue: item.DEPARTMENT,
            rules: [
              {
                required: true,
                message: '请选择部门!',
              },
            ],
          })(<Select
            onChange={handleChange}
          >
            {departmentData}
          </Select>)}
        </FormItem>

      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  optiondata: PropTypes.object,
}

export default Form.create()(modal)
